/* eslint-disable array-callback-return */

import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'umi'
import { withI18n } from '@lingui/react'
import axios from 'axios'
import { publicIp } from '@/services/apiIp'
import { Button, Modal, Input, Tooltip, Form, Select, message } from 'antd'
import Pagination from '@/utils/Pagination'
import { layoutlist, layoutModel } from '@/utils/helper'
import styles from './index.less'
import { post, get, Delete } from '@/services/https'

const confirm = Modal.confirm
@withI18n()
class Command extends React.Component {
  formRef = React.createRef()
  state = {
    from: {},
    dataSource: [],
    current: 1,
    pageSize: 6,
    total: 0,
  }
  //初始化时自调用一次，用于请求借口数据
  componentDidMount() {
    this.onChangeCurPageOrPageSize(1, 6)
  }
  onChangeCurPageOrPageSize = (current, pageSize) => {
    this.setState(
      () => ({ current, pageSize }),
      () => {
        this.getData(current, pageSize)
      }
    )
  }
  handleSaveBtn = (values) => {
    this.setState({ initialValues: values })
    this.onChangeCurPageOrPageSize(1, 6)
  }
  getData = (current, pageSize) => {
    let data = {
      page_index: current,
      page_size: pageSize,
      ...this.state.from,
    }
    post('dashboard/student/designwork/private/list', data).then((res) => {
      if (res.code == '-1') {
        message.error(res.info)
      } else {
        this.setState({ dataSource: res.data, total: res.size })
      }
    })
  }
  handsearch = (values) => {
    this.setState({ from: values })
    this.getData(1, 10)
  }
  pale = (index) => {
    if (index == 1) {
      if (this.state.current == 1) {
      } else {
        this.setState({ current: this.state.current - 1 })
        this.getData(this.state.current - 1, 6)
      }
    } else {
      if (Math.ceil(this.state.total / 6) > this.state.current) {
        this.setState({ current: this.state.current + 1 })
        this.getData(this.state.current + 1, 6)
      }
    }
  }
  handleReset = () => {
    this.setState({ from: {} })
    this.formRef.current.resetFields()
    let that = this
    setTimeout(function () {
      that.getData(1, 10)
    }, 500) //延时10秒
  }
  modal = (item) => {
    sessionStorage.setItem('Myhomework', 0)
    this.props.history.push(`/programming/${item.id}`)
  }
  // 随机数
  getRandomInt(min, max) {
    min = Math.ceil(min)
    max = Math.floor(max)
    return Math.floor(Math.random() * (max - min + 1)) + min
  }
  render() {
    const { i18n } = this.props
    const { dataSource } = this.state

    return (
      <div style={{ height: '88%' }}>
        <div style={{ position: 'relative', height: '100%' }}>
          <div
            style={{
              display: 'flex',
              width: '94%',
              justifyContent: 'center',
              zIndex: 5,
              position: 'relative',
              marginBottom: '70px',
              left: '3%',
              height: '100%',
            }}
          >
            <div style={{ width: '100%', height: '100%' }}>
              <img
                style={{ width: '100%', height: '100%' }}
                alt=""
                src={require('../../imges/NL1.png')}
              />
            </div>
            <div style={{ width: '100%', height: '100%' }}>
              <img
                style={{ width: '100%', height: '100%' }}
                alt=""
                src={require('../../imges/NL2.png')}
              />
            </div>
          </div>
          <div className="TopBuy">
            <img
              style={{
                width: '424px',
                height: '80px',
              }}
              alt=""
              src={require('../../imges/mc.png')}
            />
            <div className="zit1">我的作品</div>
          </div>
          <div
            style={{
              position: 'absolute',
              top: '40px',
              width: '100%',
              zIndex: 5,
              height: '88%',
            }}
          >
            <div className="from">
              <Form
                className="forms"
                {...layoutlist}
                ref={this.formRef}
                onFinish={this.handsearch}
              >
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div className="from1">作品名称 </div>
                  <Form.Item
                    className={styles.antBut}
                    label=""
                    name="designwork_name"
                  >
                    <Input className="from_in" placeholder="搜索作品名称" />
                  </Form.Item>
                </div>
                <div
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    marginLeft: '20px',
                  }}
                >
                  <div className="from1">课程名称 </div>
                  <Form.Item
                    className={styles.antBut}
                    label=""
                    name="classroom_name"
                  >
                    <Input className="from_in" placeholder="搜索课程名称" />
                  </Form.Item>
                </div>
                <div>
                  <Button type="primary" htmlType="submit" className="from_bu">
                    {i18n.t`Search`}
                  </Button>
                  <Button className="from_bu1" onClick={this.handleReset}>
                    {i18n.t`Reset`}
                  </Button>
                </div>
              </Form>
            </div>
            <div className="Nl">
              {dataSource.map((item) => {
                return (
                  <div className="buhy" onClick={() => this.modal(item)}>
                    <div>
                      <img
                        style={{
                          width: '220px',
                          height: '162px',
                          cursor: 'pointer',
                        }}
                        alt=""
                        src={require('../../imges/' +
                          this.getRandomInt(1, 50) +
                          '.png')}
                      />
                    </div>
                    <div style={{ marginLeft: '13px' }}>
                      <div className="buhy1">
                        <Tooltip
                          placement="topLeft"
                          title={item.designwork_name}
                        >
                          {item.designwork_name}
                        </Tooltip>
                      </div>

                      <div className="buhy2">
                        <Tooltip
                          placement="topLeft"
                          title={item.classroom_name}
                        >
                          {item.classroom_name}
                        </Tooltip>
                      </div>

                      <div className="buhy3">发布日期</div>
                      <div className="buhy3">{item.create_time}</div>
                    </div>
                  </div>
                )
              })}
            </div>
            <div
              style={{
                position: 'absolute',
                right: '20px',
                top: '50%',
                cursor: 'pointer',
                zIndex: 8,
              }}
            >
              <img
                onClick={() => this.pale(2)}
                style={{
                  width: '60px',
                  height: '60px',
                  cursor: 'pointer',
                  zIndex: 8,
                }}
                alt=""
                src={require('../../imges/le.png')}
              />
            </div>
            <div
              style={{
                position: 'absolute',
                left: '20px',
                top: '50%',
                cursor: 'pointer',
                zIndex: 8,
              }}
            >
              <img
                onClick={() => this.pale(1)}
                style={{
                  width: '60',
                  height: '60px',
                  cursor: 'pointer',
                  zIndex: 8,
                }}
                alt=""
                src={require('../../imges/re.png')}
              />
            </div>
          </div>
          <div className="dby">
            <div style={{ width: '100%' }}>
              <img
                style={{
                  width: '100%',
                }}
                alt=""
                src={require('../../imges/db11.png')}
              />
            </div>
            <div style={{ width: '100%' }}>
              <img
                style={{
                  width: '100%',
                }}
                alt=""
                src={require('../../imges/db12.png')}
              />
            </div>
          </div>
        </div>
        <div>
          <div
            style={{
              display: 'flex',
              position: 'absolute',
              bottom: '0px',
              width: '100%',
              zIndex: 8,
            }}
          >
            <div style={{ width: '20%' }}>
              <img
                style={{
                  width: '100%',
                  height: '65px',
                }}
                alt=""
                src={require('../../imges/db2.png')}
              />
            </div>
            <div style={{ width: '60%' }}>
              <img
                style={{
                  width: '100%',
                  height: '65px',
                }}
                alt=""
                src={require('../../imges/db3.png')}
              />
            </div>
            <div style={{ width: '20%' }}>
              <img
                style={{
                  width: '100%',
                  height: '65px',
                }}
                alt=""
                src={require('../../imges/db1.png')}
              />
            </div>
          </div>
        </div>
      </div>
    )
  }
}
Command.propTypes = {}
export default Command
